<!-- <template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="getAdd">新增卡片</Button>
    </div>
    <Table
      class="table"
      :loading="loading1"
      highlight-row
      :columns="columns"
      :data="tableData"
    ></Table>
    <Modal
      :title="modelTitle"
      v-model="modal"
      :closable="false"
      :mask-closable="false"
      width="40"
    >
      <Form
        ref="form"
        :model="card"
        :rules="ruleValidate"
        :label-width="100"
      >
        <FormItem label="卡名称" prop="cardName">
          <Input
            v-model="card.cardName"
            placeholder="请输入卡名称"
            style="width: 300px; margin-left: 0px"
          ></Input>
        </FormItem>
         <FormItem label="原价" style="position: relative">
            <InputNumber
              v-model="card.originalPrice"
              placeholder="请输入会员卡原价"
              :min="0"
              style="width: 300px; margin-left: 0px"
            ></InputNumber>
          </FormItem>
          <FormItem label="现价" style="position: relative">
            <InputNumber
              v-model="card.price"
              placeholder="请输入会员卡现价"
              :min="0"
              style="width: 300px; margin-left: 0px"
            ></InputNumber>
          </FormItem>
          <FormItem label="折扣" style="position: relative">
            <InputNumber
              v-model="card.discount"
              placeholder="请输入会员卡折扣"
              :step='0.01'
              :min="0"
              :max='1'
              style="width: 300px; margin-left: 0px"
            ></InputNumber>
          </FormItem>
          <FormItem label="有效天数" style="position: relative">
            <InputNumber
              v-model="card.effectiveDays"
              placeholder="请输入会员卡有效天数"
              :min="1"
              style="width: 300px; margin-left: 0px"
            ></InputNumber>
          </FormItem>
        <FormItem label="介绍" prop="about">
            <vue-tinymce
            v-if="modal"
            :key="indx"
          :value="card.about"
          @catchData="catchData"
        ></vue-tinymce>
        </FormItem>
        <FormItem label="封面图" prop="pic">
          <div style="width: 300px">
            <vue-uploadimg
              :imgUrl="imgUrl"
              :clear="clear1"
              :key="ind"
              @uploadImg="uploadImg"
            ></vue-uploadimg>
          </div>
        </FormItem>
         
        </div>

        <Form-item style="text-align: right">
          <Button type="primary" @click="handleSubmit('form')">提交</Button>
          <Button @click="handleReset('form')" style="margin-left: 8px"
            >取消</Button
          >
        </Form-item>
      </Form>
      <div slot="footer">
      </div>
    </Modal>
  </Card>
</template> -->

<script>
export default {
  data () {
    return {
      columns: [
        { title: '卡名称', key: 'cardName', align: 'center', width: 150 },
        {
          title: '封面图',
          key: 'pic',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('img', {
              style: {
                width: '80px',
                display: 'block',
                // marginLeft: "25%",
                marginTop: '10px',
                marginBottom: '10px'
              },
              attrs: {
                src: this.prefix + params.row.pic
              }
            })
          }
        },
        {
          title: '有效天数',
          key: 'effectiveDays',
          align: 'center',
          width: 150
        },
        {
          title: '会员卡原价',
          key: 'originalPrice',
          align: 'center',
          width: 150
        },
        { title: '会员卡现价', key: 'price', align: 'center', width: 150 },
        {
          title: '折扣',
          key: 'discount',
          align: 'center',
          width: 150
        },
        {
          title: '介绍',
          align: 'center',
          minWidth: 110,
          render: (h, params) => {
            return h('div', [
              h(
                'p',
                {
                  attrs: {
                    title: params.row.about,
                    domPropsInnerHTML: params.row.about
                  },
                  domProps: { innerHTML: params.row.about },
                  style: {
                    overflow: 'hidden',
                    'text-overflow': 'ellipsis',
                    display: '-webkit-box',
                    '-webkit-box-orient': 'vertical',
                    '-webkit-line-clamp': '7',
                    cursor: 'pointer'
                  }
                },
                params.row.about
              )
            ])
          }
        },

        {
          title: '操作',
          align: 'center',
          width: '180px',
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: { type: 'primary' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.getUpdate(params)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: { type: 'error' },
                  style: {
                    'margin-left': '10px'
                  },
                  on: {
                    click: () => {
                      this.del(params)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      ind: 1,
      indx: 1,
      tableData: [],
      loading1: false,
      modal: false,
      card: {
        about: '',
        cardName: '',
        discount: 0,
        effectiveDays: 1,
        originalPrice: 0,
        pic: '',
        price: 0
      },
      id: '',
      imgUrl: '',
      clear1: false,
      modelTitle: '新增卡片'
    }
  },
  created () {
    this.getData()
  },
  mounted () {},
  methods: {
    // 获取数据
    getData () {
      this.loading1 = true
      this.$http(
        '/ztmuseum/stage/membership-card/getMembershipCardList',
        {},
        'get',
        (res) => {
          console.log(res)
          if (res.data.code == 1000) {
            this.tableData = res.data.data
          } else {
            this.$Message.error(res.data.msg)
          }
          this.loading1 = false
        }
      )
    },

    // 删除
    del (params) {
      this.$confirm('此操作将永久删除该卡片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http(
            '/ztmuseum/stage/membership-card/deleteMembershipCard',
            {
              id: params.row.id
            },
            'post',
            (res) => {
              console.log(res)
              if (res.data.data && res.data.code == 1000) {
                this.$Message.success('删除成功')
                // this.reload();
                this.getData()
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          )
        })
        .catch(() => {
          this.$Message.error('已取消删除')
        })
    },
    // 新增展览
    getAdd () {
      this.ind++
      this.modal = true
      this.modelTitle = '新增卡片'
      this.card = {
        about: '',
        cardName: '',
        discount: 0,
        effectiveDays: 1,
        originalPrice: 0,
        pic: '',
        price: 0
      }
      this.id = ''
      this.clear1 = true
      this.imgUrl = ''
    },

    uploadImg (data) {
      this.imgurl = data
      this.card.pic = data
    },
    catchData (data) {
      this.card.about = data
    },
    // 新增||修改
    handleSubmit (form) {
      this.isCustom = true
      if (this.card.cardName == '') {
        this.$Message.error('卡名称不能为空')
        return false
      }
      if (this.card.about == '') {
        this.$Message.error('介绍不能为空')
        return false
      }
      if (this.card.pic == '') {
        this.$Message.error('封面图不能为空')
        return false
      }
      console.log(this.card)
      this.$refs[form].validate((valid) => {
        if (valid) {
          // this.$Message.success("提交成功!");
          if (this.modelTitle == '新增卡片') {
            console.log(444)
            this.$http(
              '/ztmuseum/stage/membership-card/addMembershipCard',
              {
                about: this.card.about,
                cardName: this.card.cardName,
                discount: this.card.discount,
                effectiveDays: this.card.effectiveDays,
                originalPrice: this.card.originalPrice,
                price: this.card.price,
                pic: this.card.pic
              },
              'post',
              (res) => {
                console.log(res)
                console.log(res.data.data)
                if (res.data.code == 1000 && res.data.data) {
                  this.modal = false
                  this.$Message.success(res.data.msg)
                  this.getData()
                  this.card = {
                    about: '',
                    cardName: '',
                    discount: 0,
                    effectiveDays: 1,
                    originalPrice: 0,
                    pic: '',
                    price: 0
                  }
                } else {
                  this.$Message.error(res.data.msg)
                }
              }
            )
          } else {
            this.$http(
              '/ztmuseum/stage/membership-card/updateMembershipCard',
              {
                about: this.card.about,
                cardName: this.card.cardName,
                id: this.id,
                discount: this.card.discount,
                effectiveDays: this.card.effectiveDays,
                originalPrice: this.card.originalPrice,
                price: this.card.price,
                pic: this.card.pic
              },
              'post',
              (res) => {
                if (res.data.code == 1000 && res.data.data) {
                  this.modal = false
                  this.$Message.success(res.data.msg)
                  this.getData()
                  this.card = {
                    about: '',
                    cardName: '',
                    discount: 0,
                    effectiveDays: 1,
                    originalPrice: 0,
                    pic: '',
                    price: 0
                  }
                } else {
                  this.$Message.error(res.data.msg)
                }
              }
            )
          }
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (form) {
      this.modal = false
      this.$refs[form].resetFields()
    },
    getUpdate (params) {
      console.log(params.row)
      this.indx++
      this.modelTitle = '修改卡片'
      this.id = params.row.id
      this.imgUrl = params.row.pic
      this.card = {
        cardName: params.row.cardName,
        about: params.row.about,
        pic: params.row.pic,
        discount: params.row.discount,
        effectiveDays: params.row.effectiveDays,
        originalPrice: params.row.originalPrice,
        price: params.row.price
      }
      this.modal = true
    }
  }
}
</script>

<style scoped>
</style>
